<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="styles/example.css">

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

    <link rel="stylesheet" href="./styles/github.css">
    <script src="js/highlight.pack"></script>



    <script src="../src/core/PrivateScope.js"></script>
    <script src="../src/core/Utility.js"></script>
    <script src="../src/core/Deferred.js"></script>
    <script src="../src/core/AttachedData.js"></script>
    <script src="../src/core/DataObserver.js"></script>
    <script src="../src/core/ArrayMonitor.js"></script>
    <script src="../src/core/GlobalSymbolHelper.js"></script>
    <script src="../src/core/OptionParser.js"></script>
    <script src="../src/core/KnotManager.js"></script>
    <script src="../src/core/CBSLoader.js"></script>
    <script src="../src/core/HTMLAPProvider.js"></script>
    <script src="../src/core/HTMLKnotBuilder.js"></script>
    <script src="../src/core/AddonHTMLAPProvider.js"></script>
    <script src="../src/core/ComponentAPProvider.js"></script>
    <script src="../src/core/KnotInterface.js"></script>

    <link rel="stylesheet" href="styles/tabpage.css" id="tabpageCSS">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs" id="tabpageCBS"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>
    <script src="js/tabpage.js" id="tabPageSource"></script>
    <script type="text/javascript" src="js/sourceTab.js"></script>

    <script src="../src/debugger/knot.debug.js"></script>


    <style>
        .pageContent{
            width: 300px;
            height: 200px;
        }
        #red{
            background-color: red;
        }
        #yellow{
            background-color: yellow;
        }
        #blue{
            background-color: blue;
        }

        .example {
            margin: 3px 10px;
            display:  inline-block;
        }
    </style>



    <script type="text/cbs" id="exampleCBS">
        #tabpage2{
            pages[template:page2Content; header:title]: /colorPages
        }
        #page2ContentTemplate{
            style.backgroundColor:color
        }

        #sizeTest{
            height: '300px';
        }
    </script>
    <script>
        window.colorPages = [{title:"Brown", color:"brown"}, {title:"Green", color:"green"}, {title:"Gold", color:"gold"}]
    </script>
</head>
<body>

<div class="knot_example">
    <h2>Knot.js example - tab page</h2>

    <div class="example">
        <p>This is created from html:</p>
        <div knot-component="TabPage" id="tabpage">
            <div id="red" class="pageContent" pageTitle="Red">
            </div>
            <div id="yellow" class="pageContent" pageTitle="Yellow">
            </div>
            <div id="blue" class="pageContent" pageTitle="Blue">
            </div>
        </div>
    </div>

    <div class="example">
        <p>This is created from data:</p>
        <div knot-component="TabPage" id="tabpage2"></div>
        <div id="page2ContentTemplate" knot-template-id="page2Content" class="pageContent"></div>
    </div>

    <div knot-component="TabPage">
        <div class="pageContent" pageTitle="SinglePage">
            this is a single page
        </div>
    </div>

    <div knot-component="TabPage" id="sizeTest">
        <div pageTitle="900" style="height: 900px; background-color: lightblue"></div>
        <div pageTitle="1200" style="height: 1200px; background-color: lightgoldenrodyellow"></div>
    </div>
</div>

<div id="sourceTab" knot-debugger-ignore  knot-component="SourceTabPage"></div>

<script type="text/cbs">
        #sourceTab{
            sourceInfo:/sourceCodeInfo.codes
        }
</script>
<script>
    //collect source codes before knot changes the HTML
    window.sourceCodeInfo = {codes:null};

    window.SourceCodeHelper.collectSourceCodes(
            [{selector:".knot_example",title:"HTML", type:"html"},
             {selector:"#exampleCBS",title:"CBS", type:"cbs"},
             {selector:"#tabPageSource",title:"tabpage.js", type:"javascript"},
             {selector:"#tabpageCBS",title:"tabpage.pkg.cbs", type:"cbs"}],
            function(res){
                window.sourceCodeInfo.codes = res;
            });
</script>

</body>
</html>